<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<link rel="stylesheet" href="css/main.css">

	<title>Bootstrap 4</title>
</head>
<body>

	<h3>Оповещения </h3>	
	<div class="container">
		<div class="row">
			<div class="col-12">
				<div class="alert alert-primary fade show">
					<h4>Оповещение чего-либо</h4>
					<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Диких своего, если переписали коварных гор текст лучше запятых ее.</p>
					<hr>
					<p>Далеко-далеко за словесными.</p>
				</div>
				<div class="alert alert-secondary">
					This is a secondary <a href="#" class="alert-link">alert—check</a> it out!
					<button type="button" data-dismiss="alert" class="close">
						<span>&times;</span>
					</button>
				</div>
				<div class="alert alert-success">
					This is a success alert—check it out!
				</div>
				<div class="alert alert-danger">
					This is a danger alert—check it out!
				</div>
				<div class="alert alert-warning">
					This is a warning alert—check it out!
				</div>
				<div class="alert alert-info">
					This is a info alert—check it out!
				</div>
				<div class="alert alert-light">
					This is a light alert—check it out!
				</div>
				<div class="alert alert-dark">
					This is a dark alert—check it out!
				</div>
			</div>
		</div>
	</div>


	<h3>Значки</h3>
	<div class="container">
		<div class="row">
			<div class="col-12">
				Далеко-далеко за словесными <span class="badge badge-primary">это</span> горами в стране, гласных и согласных живут рыбные тексты. До злых запятых дорогу предупреждал <span class="badge badge-secondary">текст</span> вскоре языком родного большой всемогущая, всеми. Жаренные составитель бросил подпоясал переписывается <span class="badge badge-success">рыба</span> рекламных однажды предупреждал страна.
			</div>

			<button type="button" class="btn btn-primary">
				Уведомления <span  class="badge badge-light">2</span>
			</button>



			<div class="col">
				<a href="#" class="badge badge-pill badge-primary">Primary</a>
				<a href="#" class="badge badge-pill badge-secondary">Secondary</a>
				<a href="#" class="badge badge-pill badge-success">Success</a>
				<span class="badge badge-pill badge-danger">Danger</span>
				<span class="badge badge-warning">Warning</span>
				<span class="badge badge-info">Info</span>
				<span class="badge badge-light">Light</span>
				<span class="badge badge-dark">Dark</span>
			</div>
		</div>
	</div>


	<h3>Хлебные крошки</h3>
	<div class="container">
		<div class="row">
			<div class="col-12">
				<ul class="breadcrumb">
					<li class="breadcrumb-item"><a href="#">ITVDN</a></li>
					<li class="breadcrumb-item"><a href="#">Курсы</a></li>
					<li class="breadcrumb-item"><a href="#">Bootstrap 4</a></li>
					<li class="breadcrumb-item active">Урок 3 (компоненты)</li>
				</ul>
			</div>
			<div class="col-12">
				<div class="breadcrumb">
					<div class="breadcrumb-item"><a href="#">ITVDN</a></div>
					<div class="breadcrumb-item"><a href="#">Курсы</a></div>
					<div class="breadcrumb-item"><a href="#">Bootstrap 4</a></div>
					<div class="breadcrumb-item active">Урок 3 (компоненты)</div>
				</div>
			</div>
		</div>
	</div>

	
	<h3>Карточки</h3>
	<div class="container">
		<div class="row">
			<div class="col-3">
				<div class="card">
					<img class="card-img-top" src="img/1.jpg" alt="Card image cap">
					<div class="card-body">
						<h5 class="card-title">Имя карточки</h5>
						<p class="card-text">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
						<a href="#" class="btn btn-primary">Go somewhere</a>
					</div>
				</div>
			</div>
			<div class="col-3">
				<div class="card text-white">
					<img class="card-img" src="img/redkie-zhivotnie-krasniy-volk.jpg" alt="Card image cap">
					<div class="card-img-overlay">
						<h5 class="card-title">Имя карточки</h5>
						<p class="card-text">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
					</div>
				</div>
			</div>
			<div class="col-3">
				<div class="card">
					<div class="card-header">
						<h5 class="card-title">Имя карточки</h5>
					</div>
					<div class="card-body">
						<p class="card-text">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
						<a href="#" class="btn btn-primary">Go somewhere</a>
					</div>
				</div>
			</div>
			<div class="col-3">
				<div class="card">
					<div class="card-body">
						<h5 class="card-title">Имя карточки</h5>
						<p class="card-text">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
						<a href="#" class="btn btn-primary">Go somewhere</a>
					</div>
					<img class="card-img-bottom" src="img/rys.jpg" alt="Card image cap">
				</div>
			</div>
			<div class="col-3">
				<div class="card text-right">
					<div class="card-header">
						<h5 class="card-title">Цитата</h5>
					</div>
					<div class="card-body">
						<blockquote>
							<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
							<div class="blockquote-footer">описание <cite>Автор</cite></div>
						</blockquote>
					</div>
				</div>
			</div>
			<div class="col-3">
				<div class="card text-center">
					<div class="card-header">
						<h5 class="card-title">Имя карточки</h5>
					</div>
					<div class="card-body">
						<p class="card-text">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
						<a href="#" class="btn btn-primary">Go somewhere</a>
					</div>
					<div class="card-footer">
						<h5 class="card-title">подвал</h5>
					</div>
				</div>
			</div>
			<div class="col-3">
				<div class="card text-center bg-primary text-white">
					<div class="card-header">
						<h5 class="card-title">Имя карточки</h5>
					</div>
					<div class="card-body">
						<p class="card-text">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
						<a href="#" class="btn btn-primary">Go somewhere</a>
					</div>
					<div class="card-footer">
						<h5 class="card-title">подвал</h5>
					</div>
				</div>
			</div>
			<div class="col-3">
				<div class="card text-center bg-danger text-white">
					<div class="card-header">
						<h5 class="card-title">Имя карточки</h5>
					</div>
					<div class="card-body">
						<p class="card-text">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
						<a href="#" class="btn btn-primary">Go somewhere</a>
					</div>
					<div class="card-footer">
						<h5 class="card-title">подвал</h5>
					</div>
				</div>
			</div>
			<div class="col-3">
				<div class="card text-center bg-success text-white">
					<div class="card-header">
						<h5 class="card-title">Имя карточки</h5>
					</div>
					<div class="card-body">
						<p class="card-text">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
						<a href="#" class="btn btn-primary">Go somewhere</a>
					</div>
					<div class="card-footer">
						<h5 class="card-title">подвал</h5>
					</div>
				</div>
			</div>
			<div class="col-3">
				<div class="card text-center bg-warning text-white">
					<div class="card-header">
						<h5 class="card-title">Имя карточки</h5>
					</div>
					<div class="card-body">
						<p class="card-text">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
						<a href="#" class="btn btn-primary">Go somewhere</a>
					</div>
					<div class="card-footer">
						<h5 class="card-title">подвал</h5>
					</div>
				</div>
			</div>
			<div class="col-3">
				<div class="card text-center border-success">
					<div class="card-header">
						<h5 class="card-title">Имя карточки</h5>
					</div>
					<div class="card-body">
						<p class="card-text">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
						<a href="#" class="btn btn-primary">Go somewhere</a>
					</div>
					<div class="card-footer">
						<h5 class="card-title">подвал</h5>
					</div>
				</div>
			</div>
			<div class="card-group">
				<div class="card text-center ">
					<div class="card-header border-danger">
						<h5 class="card-title">Имя карточки</h5>
					</div>
					<div class="card-body">
						<p class="card-text"> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
						<a href="#" class="btn btn-primary">Go somewhere</a>
					</div>
					<div class="card-footer">
						<h5 class="card-title">подвал</h5>
					</div>
				</div>
				<div class="card text-center">
					<div class="card-header">
						<h5 class="card-title">Имя карточки</h5>
					</div>
					<div class="card-body">
						<p class="card-text">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
						<a href="#" class="btn btn-primary">Go somewhere</a>
					</div>
					<div class="card-footer border-warning">
						<h5 class="card-title">подвал</h5>
					</div>
				</div>
				<div class="card text-center  border-info">
					<div class="card-header border-info">
						<h5 class="card-title">Имя карточки</h5>
					</div>
					<div class="card-body border-info">
						<p class="card-text">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
						<a href="#" class="btn btn-primary">Go somewhere</a>
					</div>
					<div class="card-footer border-info">
						<h5 class="card-title">подвал</h5>
					</div>
				</div>
			</div>
		</div>
	</div>

	
	<h3>Кнопки, группы кнопок</h3>
	<div class="container">
		<div class="row">
			<div class="col-12">
				<button type="button" class="btn btn-block active btn-lg btn-primary">Primary</button>
				<button type="button" class="btn btn-block active btn-lg btn-secondary">Secondary</button>
				<button type="button" class="btn btn-block active btn-lg btn-success">Success</button>
				<button type="button" disabled class="btn btn-block btn-lg btn-danger">Danger</button>
				<button type="button" disabled class="btn btn-block btn-sm btn-warning">Warning</button>
				<button type="button" disabled class="btn btn-block btn-sm btn-info">Info</button>
				<button type="button" disabled class="btn btn-block btn-sm btn-light">Light</button>
				<button type="button" disabled class="btn btn-block btn-sm btn-dark">Dark</button>
			</div>
			<div class="col-12">
				<button type="button" class="btn btn-sm btn-outline-primary">Primary</button>
				<button type="button" class="btn btn-sm btn-outline-secondary">Secondary</button>
				<button type="button" class="btn btn-sm btn-outline-success">Success</button>
				<button type="button" class="btn btn-sm btn-outline-danger">Danger</button>
				<button type="button" class="btn btn-lg btn-outline-warning">Warning</button>
				<button type="button" class="btn btn-lg btn-outline-info">Info</button>
				<button type="button" class="btn btn-lg btn-outline-light">Light</button>
				<button type="button" class="btn btn-lg btn-outline-dark">Dark</button>
				<input type="submit" value="submit" class="btn btn-lg btn-outline-dark">
				<input type="reset" value="reset" class="btn btn-lg btn-outline-dark">
				<input type="button" value="button" class="btn btn-lg btn-outline-dark">
			</div>


			<div class="col-12">
				<div class="btn-group-toggle" data-toggle="buttons">
					<label class="btn btn-outline-success btn-group-toggle">
						<input type="checkbox"> Checked
					</label>
				</div>
				<div class="btn-group btn-group-toggle" data-toggle="buttons">
					<label class="btn btn-outline-success active">
						<input type="radio" name="options" id="option1" autocomplete="off" checked> Checked
					</label>
					<label class="btn btn-outline-success">
						<input type="radio" name="options" id="option1" autocomplete="off"> Checked
					</label>
					<label class="btn btn-outline-success">
						<input type="radio" name="options" id="option1" autocomplete="off"> Checked
					</label>
				</div>
			</div>
			<div class="col-12">
				<div class="btn-group btn-group-toggle" data-toggle="buttons">
					<button type="button" class="btn btn-outline-success">Success</button>
					<button type="button" class="btn btn-outline-danger">Danger</button>
					<button type="button" class="btn btn-outline-warning">Warning</button>
					<button type="button" class="btn btn-outline-info">Info</button>
				</div>
				<div class="btn-toolbar">
					<div class="btn-group-vertical btn-group-lg btn-group-toggle mr-2" data-toggle="buttons">
						<button type="button" class="btn btn-success">1</button>
						<button type="button" class="btn btn-danger">2</button>
						<button type="button" class="btn btn-warning">3</button>
						<button type="button" class="btn btn-info">4</button>
					</div>
					<div class="btn-group btn-group-toggle mr-2" data-toggle="buttons">
						<button type="button" class="btn btn-success">1</button>
						<button type="button" class="btn btn-danger">2</button>
						<button type="button" class="btn btn-warning">3</button>
					</div>
					<div class="btn-group group-sm btn-group-toggle" data-toggle="buttons">
						<button type="button" class="btn btn-success">1</button>
					</div>
				</div>
			</div>
		</div>
	</div>


	<h3>Выпадающие списки</h3>
	<div class="container">
		<div class="row">
			<div class="col-12">
				<div class="dropdown btn-group">
					<button class="btn btn-info " type="button">
						Выпадающий список
					</button>
					<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"></button>
					<div class="dropdown-menu dropdown-menu-right " aria-labelledby="dropdownMenuButton">
						<h6 class="dropdown-header">Имя меню</h6>
						<a class="dropdown-item" href="#">Меню</a>
						<a class="dropdown-item disabled" href="#">Меню</a>
						<a class="dropdown-item" href="#">Меню</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#">Меню</a>
						<a class="dropdown-item" href="#">Меню</a>
					</div>
				</div>
				<div class="dropdown btn-group">
					<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">Выпадающий список</button>
					<div class="dropdown-menu dropdown-menu-right " aria-labelledby="dropdownMenuButton">
						<h6 class="dropdown-header">Имя меню</h6>
						<a class="dropdown-item" href="#">Меню</a>
						<a class="dropdown-item disabled" href="#">Меню</a>
						<a class="dropdown-item" href="#">Меню</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#">Меню</a>
						<a class="dropdown-item" href="#">Меню</a>
					</div>
				</div>
			</div>
		</div>
	</div>



	<h3>Пагинация формы</h3>
	<div class="container">
		<div class="row">
			<div class="col-12">
				<form>
					<div class="form-group row">
						<label class="col-3" for="exampleInputEmail1">Email адресс</label>
						<input type="email" class="form-control col-9" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Email адресс">
						<small id="emailHelp" class="col-9 offset-3">Мы никогда не будем делиться вашей электронной почтой с кем-либо еще.</small>
					</div>
					<div class="form-group row">
						<label class="col-3" for="exampleInputPassword1">пароль</label>
						<input readonly type="password" class="form-control col-9" id="exampleInputPassword1" placeholder="пароль">
					</div>
					<div class="form-group">
						<label for="exampleFormControlSelect1">Example select</label>
						<select class="form-control" id="exampleFormControlSelect1">
							<option>1</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
							<option>5</option>
						</select>
					</div>
					<div class="form-row">
						
					<div class="form-check-inline">
						<input type="checkbox" class="form-check-input" id="exampleCheck1" disabled>
						<label class="form-check-label" for="exampleCheck1">1</label>
					</div>
					<div class="form-check-inline">
						<input type="checkbox" class="form-check-input" id="exampleCheck1">
						<label class="form-check-label" for="exampleCheck1">2</label>
					</div>
					</div>
					<button type="submit" class="btn btn-primary">Submit</button>
				</form>
			</div>
		</div>
	</div>


	<h3>Инпут группы</h3>
	<div class="container">
		<div class="row">
			<div class="col-12">
				<form>
					<div class="input-group mb-3">
						<input type="email" class="form-control" placeholder="Email адресс" aria-describedby="basic-addon1">
						<div class="input-group-append">
							<button type="button" class="btn btn-primary">Наша кнопка</button>
							<button type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown">Наша кнопка</button>
							<div class="dropdown-menu">
								<div class="dropdown-item">menu</div>
								<div class="dropdown-item">menu</div>
								<div class="dropdown-item">menu</div>
								<div class="dropdown-item">menu</div>
							</div>
						</div>
					</div>
					<div class="input-group mb-3">
						<input type="password" class="form-control" placeholder="пароль" aria-describedby="basic-addon2">
						<div class="input-group-append">
							<span class="input-group-text" id="basic-addon2">@example.com</span>
						</div>
					</div>
					<div class="input-group mb-3">
						<div class="input-group-prepend">
							<div class="input-group-text">
								<input type="checkbox" aria-label="Checkbox for following text input">
							</div>
						</div>
						<input type="text" class="form-control" aria-label="Text input with checkbox">
					</div>
					<div class="input-group mb-3">
						<div class="input-group-prepend">
							<div class="input-group-text">
								Что-то там
							</div>
						</div>
						<input type="text" class="form-control">
						<input type="text" class="form-control">
					</div>
					<button type="submit" class="btn btn-primary">Submit</button>
				</form>
			</div>
		</div>
	</div>


	<h3>Навигация, навбары</h3>
	<div class="container">
		<div class="row">
			<div class="col-12">
				<nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark">
					<a class="navbar-brand" href="#">Navbar</a>
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" >
						<span class="navbar-toggler-icon"></span>
					</button>

					<div class="collapse navbar-collapse" id="navbarSupportedContent">
						<ul class="navbar-nav">
							<li class="nav-item active">
								<a class="nav-link" href="#">Home</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">Link</a>
							</li>
							<li class="nav-item">
								<a class="nav-link disabled" href="#">Disabled</a>
							</li>
						</ul>
						<form class="form-inline ml-auto">
							<input class="form-control" type="search" placeholder="Search">
							<button class="btn btn-outline-success" type="submit">Search</button>
						</form>
					</div>
				</nav>
			</div>
		</div>
		<div class="row">
			<div class="col-12">
				<div class="row">
					<div class="col-3">
						<nav class="nav flex-column nav-pills">
							<a class="nav-item nav-link active" id="nav1-1" data-toggle="tab" aria-controls="tab1-1" href="#tab1-1">Active</a>
							<a class="nav-item nav-link" id="nav1-2" data-toggle="tab" aria-controls="tab1-2" href="#tab1-2">Link</a>
							<a class="nav-item nav-link" id="nav1-3" data-toggle="tab" aria-controls="tab1-3" href="#tab1-3">Link</a>
						</nav>
					</div>
					<div class="col-9">
						<div class="tab-content">
							<div class="tab-pane fade show active" id="tab1-1" aria-labelledby="nav1-1">1 Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Буквоград, осталось. Пунктуация меня путь встретил рот образ, предупреждал рекламных?</div>
							<div class="tab-pane fade" id="tab1-2" aria-labelledby="nav1-2">2 Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Агенство инициал скатился вдали, текстами ведущими приставка себя, имени моей.</div>
							<div class="tab-pane fade" id="tab1-3" aria-labelledby="nav1-3">3 Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Жизни если предупредила о заглавных встретил пустился все толку, обеспечивает?</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-12">
				<ul class="nav nav-fill nav-pills">
					<li class="nav-item">
						<a class="nav-link" id="nav2-1" data-toggle="tab" aria-controls="tab2-1" href="#tab2-1">Active</a>
					</li>
					<li class="nav-item">
						<a class="nav-link active" id="nav2-2" data-toggle="tab" aria-controls="tab2-2" href="#tab2-2">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" id="nav2-3" data-toggle="tab" aria-controls="tab2-3" href="#tab2-3">Link</a>
					</li>
				</ul>
				<div class="tab-content">
					<div class="tab-pane fade show active" id="tab2-1" aria-labelledby="nav2-1">1 Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Переписывается, которое, встретил. Рыбными ручеек всеми даль, предложения, маленькая сих.</div>
					<div class="tab-pane fade" id="tab2-2" aria-labelledby="nav2-2">2 Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Ipsum эта за даль сих, рукопись назад снова взобравшись не.</div>
					<div class="tab-pane fade" id="tab2-3" aria-labelledby="nav2-3">2 Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Страна правилами мир, то он путь подзаголовок знаках предложения послушавшись.</div>
				</div>
			</div>
		</div>
	</div>


	<h3>Подсказки</h3>
	<div class="container">
		<div class="row">
			<div class="col-12">
				<button style="margin-left: 300px;" type="button" class="btn btn-lg btn-danger" data-placement="bottom" data-toggle="tooltip" title="Name popover" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

				<span class="" data-toggle="tooltip" title="Name popover" data-content="Disabled popover">
					<button class="btn btn-primary" type="button" >Disabled button</button>
				</span>
			</div>
		</div>
	</div>


	<h3>Прогресс бар</h3>
	<div class="container">
		<div class="row">
			<div class="col-12">
				<div class="progress mb-2" style="height: 30px;">
					<div class="progress-bar bg-warning progress-bar-striped" style="width: 45%" >45%</div>
				</div>
				<div class="progress mb-2" style="height: 50px;">
					<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width: 10%" >10%</div>
					<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 20%" >20%</div>
					<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width: 45%" >45%</div>
				</div>
				<div class="progress mb-2">
					<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 20%" >20%</div>
				</div>
				<div class="progress" style="height: 155px;">
					<div class="progress-bar progress-bar-striped" style="width: 85%" >85%</div>
				</div>
			</div>
		</div>
	</div>


	<h3>Скролинг</h3>
	<div class="container">
		<div class="row">
			<div class="col-12">
				<nav id="navbar-example2" class="navbar navbar-light bg-light">
					<a class="navbar-brand" href="#">Navbar</a>
					<ul class="nav nav-pills">
						<li class="nav-item">
							<a class="nav-link" href="#fat">@fat</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#mdo">@mdo</a>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" >Dropdown</a>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#one">one</a>
								<a class="dropdown-item" href="#two">two</a>
								<div role="separator" class="dropdown-divider"></div>
								<a class="dropdown-item" href="#three">three</a>
							</div>
						</li>
					</ul>
				</nav>
				<div data-spy="scroll" data-target="#navbar-example2"  
					style="position: relative;
					height: 400px;
					overflow: auto;">
					<h4 id="fat">@fat</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus quibusdam minima natus reprehenderit enim aspernatur, accusantium in eaque incidunt voluptatem aperiam laboriosam veniam eum cum. Ab optio enim quibusdam sequi, modi fugit eos nesciunt. Earum, aliquam quam, dicta tempore cupiditate eveniet accusamus deserunt consequatur debitis itaque commodi neque, quidem recusandae nihil possimus, voluptatibus alias harum cum natus suscipit temporibus provident! Cupiditate incidunt hic sit harum deserunt molestiae ratione impedit ullam sed, perferendis quis atque eligendi tenetur soluta voluptas sapiente quibusdam animi, fugiat! Sapiente ipsam, nobis fugiat suscipit aspernatur ut saepe dolor doloribus aliquid illum deleniti, vero eum cupiditate non quod debitis. Aliquid eligendi corporis porro non dolor delectus cumque recusandae itaque cupiditate, hic fuga nulla quos voluptates, dicta nam officiis deserunt voluptatem aut totam dolores, voluptatibus consequuntur neque accusamus ab. Voluptas et vero suscipit rem labore pariatur quae fugit, tempore doloribus explicabo. Nostrum voluptatem animi nisi est sint dignissimos voluptate eaque, in facere voluptatum perferendis maiores eligendi, ipsam, explicabo officia asperiores repellendus voluptas saepe iusto quod. Qui dolore rerum quisquam inventore cum, aliquid velit eligendi! Impedit unde repellendus, quos temporibus nobis corporis ducimus praesentium tempore necessitatibus quae incidunt qui provident veritatis nihil quia sunt obcaecati quo, consequatur similique mollitia doloribus quam! Temporibus totam fugiat ipsum exercitationem dolorem beatae? Numquam dignissimos perferendis rerum deleniti eum natus temporibus commodi voluptatibus, dolore culpa nisi laborum eos excepturi, distinctio dicta ipsa aliquid. Perferendis blanditiis dicta provident laborum. Eveniet perferendis tenetur tempora soluta quisquam sapiente ducimus distinctio molestiae aut id ut doloribus nesciunt, eaque nostrum expedita at ipsum animi, quas accusantium assumenda omnis modi possimus unde! Deserunt itaque molestias expedita sapiente, soluta magnam veniam delectus quidem hic facere, laborum quo, eius ab ipsam sit reprehenderit. Provident laudantium quod iure iste, aliquid laborum! Nam itaque non mollitia beatae numquam magni modi? Ullam, neque? Eaque ducimus, veniam.</p>
					<h4 id="mdo">@mdo</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, illo cumque maxime amet pariatur qui inventore ipsam quos, alias minima suscipit reprehenderit nesciunt temporibus molestias rerum recusandae asperiores explicabo id facilis tempora modi laudantium assumenda sit voluptates. Animi nam voluptate officia. Sapiente, modi? Quisquam repellat dolorem est dicta vero neque at eos velit voluptate soluta aperiam quasi totam, magni, exercitationem blanditiis. Quia quisquam libero in minima quasi itaque quaerat dicta suscipit sed ratione veritatis placeat eveniet delectus, voluptatum voluptate nam adipisci, soluta velit minus, provident praesentium tempora quam hic dolore! Ut dolorum blanditiis, neque eligendi illum! Dolor, quae aliquid, quisquam consequatur temporibus iusto dolore praesentium ducimus iure possimus minima tempore earum rerum dolorem vero consectetur beatae doloremque! Minus quae voluptatibus fugiat repellendus eos, facere consequatur provident animi quo minima quod suscipit et sint at illum aliquid tempore aperiam a consectetur! Quam sunt, magnam doloremque possimus blanditiis ipsam veritatis, eos numquam impedit repudiandae ratione eius dicta officiis excepturi quisquam libero consectetur voluptatem aperiam veniam rem! Vitae tenetur beatae itaque voluptatum ut eaque, omnis optio, molestias deserunt perferendis. Qui non facilis, beatae nobis dolores dolorem quasi totam omnis consequuntur nisi adipisci a quisquam, at culpa corrupti incidunt ratione aut ipsa alias ad sequi debitis. Ullam sit magnam, esse obcaecati quo quaerat, error odit quibusdam, accusamus ab dolore laboriosam! At esse sapiente dignissimos magnam ipsum, ad eligendi et incidunt dolore porro aliquid voluptate non nesciunt labore quidem neque. Fuga maiores aspernatur iusto debitis repellendus repellat recusandae perferendis rem, dolore quibusdam dicta blanditiis quos sint, delectus laborum, natus eligendi inventore necessitatibus sed commodi nesciunt. Laboriosam delectus doloribus cupiditate maxime earum, ipsam eligendi itaque hic magnam possimus harum inventore adipisci voluptatibus placeat odit dicta sapiente, architecto quo? Eaque eos unde ipsam cum, voluptates soluta rem, minima repellendus tempora consectetur quo incidunt a eum, in, quisquam.</p>
					<h4 id="one">one</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure vel quos repellendus voluptatibus assumenda officiis incidunt beatae quidem, ullam error ipsa magni laboriosam, voluptatem, cupiditate sint totam eos eius? Doloribus at veritatis, voluptatem debitis vero. Est sunt animi delectus, eaque velit libero amet a ducimus, ad nam, numquam consequuntur nihil? Accusantium nostrum ad expedita optio aliquam magni inventore, quasi voluptatibus a doloremque. Laborum dolores magnam vitae odit voluptatibus nesciunt minus, eveniet ut praesentium neque illum, itaque molestiae asperiores facilis blanditiis, fuga aspernatur doloribus? Soluta magnam facilis recusandae consequatur dolores illo. Repellendus et, dolorem iusto doloribus accusamus expedita non atque! Ab cumque laborum porro nulla. Voluptatibus quae ullam vero corporis sunt fugiat laudantium cumque debitis molestiae laboriosam, sit beatae sed doloribus ex, ratione quam inventore quia quidem, voluptate reiciendis et minus enim ab eligendi! Asperiores amet dolorem cupiditate error necessitatibus maiores facilis doloremque illum ducimus minima delectus, minus, soluta nostrum voluptate itaque magnam omnis ea possimus aliquam quia illo repellat sunt autem! Ad dignissimos, facilis illo. Labore molestias dicta obcaecati, unde voluptatem eos, illo placeat veritatis, cupiditate totam quas quisquam. Quam harum, autem quasi suscipit veritatis, iure culpa laudantium iste, nobis praesentium quaerat consectetur atque fuga necessitatibus ipsam. Facilis vitae similique, possimus, eveniet totam voluptatem nihil nostrum maiores neque adipisci, iure voluptas repudiandae soluta. Deleniti consectetur ab voluptatibus, saepe voluptate voluptatum delectus, nam! Totam mollitia, pariatur laboriosam voluptatibus provident. Est, laborum magni commodi animi soluta harum. Consequatur natus harum quidem esse culpa rerum officia quam mollitia aut sint hic dolores quaerat, eum corporis eius odit. Id facere ducimus porro, optio officiis quibusdam. Corporis consequuntur atque dolorem sit odio, autem, natus possimus unde error dicta nam consequatur cupiditate. Quo, distinctio aperiam placeat, minus iste aliquid! Illo in, iure laboriosam labore dolores sit nostrum vel, dolorum fugiat odit consectetur sunt explicabo esse quia.</p>
					<h4 id="two">two</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores totam libero ducimus cum aliquid assumenda, dicta atque repellat consequuntur repellendus dolore et delectus neque quas non nobis quam voluptates fuga saepe voluptatem incidunt officiis quidem eos distinctio magni. Maxime esse fugiat possimus! Blanditiis eaque, voluptas neque, soluta itaque consequatur assumenda necessitatibus hic obcaecati facilis odio vel adipisci perspiciatis distinctio officiis? Officia molestiae nesciunt provident qui, ullam maxime, architecto quaerat harum soluta iusto delectus odio deleniti, enim dolorum beatae! Inventore voluptate, dolorum molestiae modi temporibus aliquam veniam saepe nesciunt suscipit voluptatum quos expedita molestias sed minima assumenda! Accusamus placeat ipsa harum! Dolore rem dolorum explicabo sed fuga esse est, et, voluptatem perferendis, placeat, quisquam saepe libero natus. Accusantium voluptate fugit excepturi fugiat beatae, hic numquam ea, nihil quod. Est consequatur repellat blanditiis harum dicta nulla mollitia optio, placeat adipisci vitae facere dolore cupiditate veniam quibusdam voluptatum necessitatibus ducimus numquam. Quam autem quisquam obcaecati, neque quae libero vitae quo illo fuga eligendi doloremque id, alias, totam eius harum sunt magni! Autem, voluptatibus. Esse earum iusto veniam pariatur minus reprehenderit, quaerat recusandae ipsam, amet libero quos labore placeat laboriosam fugiat et delectus explicabo consequatur obcaecati perferendis veritatis voluptas. Eum animi delectus rerum debitis alias maiores sed perferendis voluptatem nesciunt recusandae odit autem fugiat excepturi accusantium a, temporibus voluptatibus, necessitatibus, mollitia blanditiis minima repellat quidem nobis quae. Reprehenderit neque voluptas quae inventore aliquam repellat tempore tenetur corporis aperiam iure saepe, dolore sed perferendis possimus quos deserunt. Possimus officiis recusandae quibusdam praesentium maiores quasi quaerat facere quisquam deleniti, modi debitis autem cumque earum eaque! Natus distinctio eos doloribus alias nemo! Ipsa modi nemo cum amet voluptas. Eaque fugit odio fugiat, pariatur voluptate ea nihil, sit vitae impedit veritatis deserunt reiciendis natus voluptates recusandae iste modi tempora harum ullam necessitatibus nam culpa! Assumenda voluptate repudiandae earum.</p>
					<h4 id="three">three</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, voluptatem reprehenderit aspernatur deserunt qui recusandae officiis temporibus. Voluptatibus soluta consectetur commodi, iure maiores doloribus provident. Quibusdam sed fugit voluptates! Nostrum, possimus. Dicta minima optio delectus quisquam amet dolorum pariatur eligendi iure alias vero iste sit, accusantium voluptatibus autem esse ipsa ipsum nostrum dolorem corporis voluptatum similique, neque. Nemo quaerat, atque et ducimus dolorem corporis? Necessitatibus alias saepe blanditiis atque nemo natus obcaecati, fugit architecto veritatis libero dolorem esse nam quasi provident, molestiae corporis ipsa ut beatae cum, voluptatum illo ipsam eum. Ut provident explicabo veritatis voluptatum! Delectus aspernatur saepe quaerat minus! Consectetur optio saepe reprehenderit doloribus dolor quae excepturi error mollitia itaque minima voluptatum fugit sint, facere quaerat nam iste eius, assumenda beatae architecto laudantium, minus aliquid perspiciatis dignissimos nesciunt veniam! Aliquam fugit molestiae a nemo dignissimos quasi maiores rem aliquid eum! Impedit, esse veritatis beatae corporis magni cum ab dolorem doloribus. Non impedit quos fugiat vel, provident cupiditate recusandae quam dolores, velit illum tenetur quae corporis architecto accusantium unde expedita doloribus sequi nam at laborum possimus! Modi nihil maiores molestias distinctio. Omnis, nemo iste. Eos maiores facilis porro provident dolores iure doloribus soluta odit quis accusamus inventore modi animi ex necessitatibus fugiat alias doloremque fugit laudantium magni atque accusantium, mollitia dolorum. Pariatur tempora dolore ratione culpa, asperiores, distinctio perferendis voluptatibus, provident dolorem sed molestiae iure. Aliquam, excepturi! Cum earum fugit ad doloribus facere voluptas odit sequi, iusto voluptatum alias impedit dicta magni error aliquam harum! Magnam reiciendis culpa alias assumenda perspiciatis corrupti quas commodi molestias expedita repellat laboriosam, porro recusandae, incidunt impedit nihil cupiditate blanditiis eos labore sint dolores eaque aliquid! Laboriosam perspiciatis error voluptas perferendis quam. Qui fuga eaque, odit eligendi aperiam, repellendus perspiciatis tempora dolor neque dolorem, deleniti, illum quae sequi? Dolorem ea eos optio tempora, explicabo.</p>
				</div>
			</div>
		</div>
	</div>


	<h3>Адаптивное видео</h3>
	<div class="container">
		<div class="row">
			<div class="col-12">
				<div class="embed-responsive embed-responsive-16by9">
					<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/T-TYyGL9Qjg" allowfullscreen></iframe>
				</div>
			</div>	
			<div class="col-3">
				<div class="card ">
					<div class="card-header">
						<h5 class="card-title">Имя карточки</h5>
					</div>
					<div class="embed-responsive embed-responsive-16by9">
						<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/T-TYyGL9Qjg" allowfullscreen></iframe>
					</div>
					<div class="card-body">
						<p class="card-text">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
						<a href="#" class="btn btn-primary">Go somewhere</a>
					</div>
				</div>
			</div>
			<div class="col-3">
				<div class="card text-center bg-warning text-white">
					<div class="embed-responsive embed-responsive-16by9">
						<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/T-TYyGL9Qjg" allowfullscreen></iframe>
					</div>
				</div>
			</div>
		</div>
	</div>

	
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
	<script src="js/main.js"></script>
</body>
</html>